<template>
    <div class="main">
      <div class="top">
        <div class="top-seach">
        <el-input style="height: 100%;width: 100%;" v-model="seachInput" placeholder="请输入内容或标题" @keyup.enter="seachList">
      </el-input>
      <div class="seach" @click="seachList"></div>
      </div>
      <div class="top-right">
        <img class="fabu" src="../../assets/icon/fabu.png" @click="gofabu">
      </div>
      </div>

      <div class="list" ref="scrollContainer">
      
        <div 
          class="boxsList" 
          v-for="item,index in list" 
          :key="index"
          @click="expandBox(index,item.id,item.commentListId)">
          <div class="list-main">
            <img :src="item.imageUrl" class="list-url">
            <div class="list-title">{{ item.title }}</div>
            <div class="list-bottom">
              <img :src="item.avatar" class="list-avatar">
              <div class="list-name">{{ item.name }}</div>
              <div class="list-like">
              <img src="../../assets/icon/like.png" class="list-xin" v-if="item.isgood==false" @click="good(item.id)">
              <img src="../../assets/icon/liked.png" class="list-xin" v-if="item.isgood==true" @click="noGood(item.id)">
              <span class="list-num">{{ item.likeMan }}</span>
            </div>
            </div>
          </div>
        </div>

        <div class="foot">
    <el-pagination
      v-model:currentPage="currentPage"
      :total="total"
      :page-size="pageSize"
      layout="total,prev, pager, next"
      @current-change="handleCurrentChange"
    />
      </div>
      </div>
  


    </div>
  
    <el-dialog destroy-on-close class="custom-dialog" v-model="dialogTableVisible" style="height: 70%;position: relative;padding: 0;" :show-close="false">
      <div class="main-view">
        <div class="view-left">
                <img :src="postInfo.imageUrl" style="width: 100%;height: 100%;">
        </div>
        <div class="view-right">
                <div class="right-top">
                  <img :src="postInfo.avatar" class="top-avatar">
                  <div class="top-name">{{ postInfo.name }}</div>
                </div>
                <div class="right-center"><h3>&ensp;{{postInfo.title}}</h3>
                  <div class="center-top">&emsp;&emsp;{{postInfo.content}}</div>
                  <div class="center-botton" v-for="itemComment,index in commentList">
                    <div class="comment-header">
                      <img class="comment-avatar" :src="itemComment.commentAvatar">
                      <div class="comment-meta">
                        <span class="comment-name">{{ itemComment.commentName }}</span>
                        <br>
                        <small class="comment-time">{{ itemComment.createTime }}</small>
                      </div>
                    </div>
                    <div class="comment-body">{{ itemComment.comment }}</div>
                    <hr>
                  </div>
                </div>
                <div class="right-botton">
                  <input class="botton-input" placeholder="评论..." v-model="commentInput" @keyup.enter="sendComment()"></input>
                  <div class="botton-like">
                    <img src="../../assets/icon/like.png" class="list-xin" v-if="postInfo.isgood==false" @click="good(postInfo.id)">
                    <img src="../../assets/icon/liked.png" class="list-xin" v-if="postInfo.isgood==true" @click="noGood(postInfo.id)">
                    <span class="list-num">{{ postInfo.likeMan }}</span>
                  </div>
                  <div class="botton-house"></div>
                </div>
        </div>
      </div>
  </el-dialog>


</template>
  
<script setup>
  import { onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import {getPostListAPI,getCommentListAPI,getPostInfoAPI,sendCommentAPI,goodAPI,noGoodAPI} from '../../api/home'
  import useCounter from '../../stores/pinia'
  import { parseJwt } from '../../stores/pinia'
import { ElMessage } from 'element-plus';
  
  const currentPage=ref(1)
  const total=ref(0)
  const pageSize=ref(16)
  const commentInput=ref("")
  const seachInput=ref("")
  const router=useRouter()
  const counterStore=useCounter()
  const dialogTableVisible = ref(false)


  const list=ref([
    // {id:1,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:2,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:2,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩从党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:3,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干塞飞飞飞e分dfvfdvdfvdfvdfv为氛围分为威风威风威风威风为为发风格化风格化热威风威风为威风威风韩国",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:4,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概分的高分都是高富帅股份大股东党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:5,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党呱呱呱呱呱呱呱呱呱古古怪怪法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:6,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:7,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:8,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:9,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:10,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:11,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:12,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆大夫士大夫大师威风大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:13,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:14,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {id:15,imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
  ])
  
  const postInfo=ref({
  // id:23,
  // imageUrl:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",
  // name:"dfdfd对方的",
  // authorId:23,
  // createTime:"2023-23-23",
  // avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",
  // title:"嘀咕嘀咕",
  // content:"rgergerg而个人个人个人"
  })

  const commentList=ref([
    // {commentId:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuih人他和肉体和serugf接口是你分五十"},
    // {commentId:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihse 然后让他还有个突然rugf接口是你分五十"},
    // {commentId:23,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihse儿童割让给rugf接口是你分五十"},
    // {commentId:25,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfu热个体人格ihserugf接口是你分五十"},
    // {commentId:26,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihse任天野环绕太阳和太热rugf接口是你分五十"},
    // {commentId:27,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfu的恒天然恒天然ihserugf接口是你分五十"},
    // {commentId:28,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihserugf接口是你分五十"},
    // {commentId:229,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfui忽悠人它也会让他以后个 hserugf接口是你分五十"},
    // {commentId:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihs他和肉体和erugf接口是你分五十"},
    // {commentId:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihserugf接口是你分五十"},
    // {commentId:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuih传播广泛和serugf接口是你分五十"},
    // {commentId:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihs绕太阳try犹太人犹太人风格和肉体和他人erugf接口是你分五十"},
    // {commentId:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihse法国海军浑然一体记忆体空间和rugf接口是你分五十"},
    // {commentId:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihserugf接口是你分五十"},
    // {commentId:22,commentName:"巍峨哇",commentAvatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",commentAuthorId:67,createTime:"2025-02-28 04:01:47",comment:"uiosfuihserugf接口是你分五十"},
  ])

  const userInfo=ref({
  // avatar:"https://pic.616pic.com/ys_img/00/04/60/DToXBfxigM.jpg"
})
  
  // 使用 ref 来跟踪当前被选中的盒子
  const selectedBox = ref(null);
  
  // 方法用于设置当前被选中的盒子索引
  const expandBox = (index,id,commentListId) => {
    // 如果再次点击同一个盒子，则关闭它
    // if (selectedBox.value === index) {
    //   selectedBox.value = null;
    // } else {
      // selectedBox.value = index;
    dialogTableVisible.value=true
      // console.log(commentListId,"点击了postId为",id)
      getCommentList(id)
      getPostInfo(id)
    }
  // };
  
  const gofabu=()=>{
    if(counterStore.jwt==null){
      ElMessage({
    message: '您还没登录，请先前往登录',
    type: 'warning',
  })
    }else{
      router.push('/home/fabu')
    }
  }

  // 处理 main-view 点击事件，这里你可以添加任何你想要的功能
  const onMainViewClick = () => {
    // console.log('main-view clicked');
  };

  // 定义处理滚动事件的方法。
  const scrollContainer=ref(null)
const scrollToTop = () => {
  scrollContainer.value.scrollTo({top: 0});
}

const good=async(postId)=>{
  event.stopPropagation(); // 阻止事件冒泡
  let params={
    postId:postId,
    userId:userInfo.value.id
  }
  // console.log(params)
  if(userInfo.value.id!=undefined){
    const result=await goodAPI(params)
    // console.log("点赞反馈",result.data)
    if(result.data.code===0){
      getPostList() 
      getPostInfo(postId)
    }
  }else{
    ElMessage.warning("您还未登录")
  }
}

const noGood=async(postId)=>{
  event.stopPropagation(); // 阻止事件冒泡
  let params={
    postId:postId,
    userId:userInfo.value.id
  }
  if(userInfo.value.id!=undefined){
    const result=await noGoodAPI(params)
    // console.log("取消点赞反馈",result.data)
    if(result.data.code===0){
      getPostList()
      getPostInfo(postId)
    }
  }else{
    ElMessage.warning("您还未登录")
  }
}

  const handleCurrentChange=()=>{
    console.log("当前页码数为",currentPage.value)
    scrollToTop()
    getPostList()
  }

  const seachList=async()=>{
  currentPage.value=1
  getPostList()
  }

  const sendComment=async()=>{
  if(counterStore.jwt==null){
    ElMessage({
    message: '您还没登录，请先前往登录',
    type: 'warning',
  })
  }else{
    userInfo.value=parseJwt(counterStore.jwt).claims
    // console.log(userInfo.value)
    // console.log(commentInput.value)
    let params={
      postId:postInfo.value.id,
      commentName:userInfo.value.username,
      commentAuthorId:22,
      commentAvatar:userInfo.value.avatar,
      comment:commentInput.value
    }
    // console.log("评论信息",params)
    const result=await sendCommentAPI(params)
    getCommentList(postInfo.value.id)
  }
  commentInput.value=""
  }

  const getPostInfo=async(id)=>{
    let params={
      id:id
    }
  const result=await getPostInfoAPI(params)
  // console.log(id,"帖子详情",result.data.data)
  postInfo.value=result.data.data
  }

  const getCommentList=async(id)=>{
    let params={
      postId:id,
      userId:userInfo.value.id,
      pageSize:1000,
      page:1
    }
    const result=await getCommentListAPI(params)
    // console.log("评论列表",result.data.data)
    commentList.value=result.data.data.list
  }
  const getPostList=async()=>{
    let params={
      pageNo:currentPage.value,
      pageSize:pageSize.value,
      sortBy:0,
      searchTerms:seachInput.value,
      userId:userInfo.value.id
    }
    // console.log(params)
    const result=await getPostListAPI(params)
    // console.log("帖子列表",result.data.data)
    list.value=result.data.data.list
    total.value=result.data.data.total
    // console.log("帖子列表111",list.value)
  }
  onMounted(()=>{
    const jwt=counterStore.jwt
    if(jwt!=null){
      userInfo.value=parseJwt(jwt).claims
      // console.log(parseJwt(jwt))
    }
    getPostList()
    scrollToTop()
  })
</script>
  
<style>
.custom-dialog{
  /* background-color: yellowgreen !important; */
  border-radius: 15px !important;
}

.custom-dialog .el-dialog__header {
   display: none !important; 
}

.custom-dialog .el-dialog__headerbtn {
  display: none !important; 
}
.custom-dialog .el-dialog__body {
  padding: 0 !important;
}
</style>

<style scoped>
  .main{
    width: 100%;
    height: 100%;
    /* height: auto !important;
    height: 200px; */
    display: flex;
    /* background-color: rgb(205, 109, 50); */
    position: relative;
    /* overflow: auto; */
    flex-direction: column;
    /* display: flex;
    flex-direction: row; */
  }
  .top{
    width: calc(100% - 250px);
    /* width: 100%; */
    /* background-color: yellowgreen; */
    /* position: relative; */
    display: flex;
    justify-content: center;
    /* flex-direction: ; */
    position: fixed;
  }
  .top-seach{
    width: 500px;
    height: 45px;
    background-color: rgb(241, 14, 14);
    position: relative;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* position: absolute; */
    border-radius: 20px;
    margin:20px 0 0 0;
    /* float: left; */
    /* left: 10px; */
  }
  :deep(.el-input__wrapper){
    /* background-color: rgb(250, 250, 250); */
    /* height: 100%; */
    border-radius: 20px;
  }
  :deep(.el-input__wrapper.is-focus){
    /* background-color: yellowgreen; */
    /* border-radius: 20px; */
    box-shadow: 0 0 0 1px rgb(2, 87, 121) inset;
  }
  .seach{
    width: 30px;
    height: 30px;
    /* float: left; */
    /* background-color: rgba(255, 0, 0, 0.342);  */
    position: absolute;
    border-radius: 20px;
    top:8px;
    right: 9px;
    background-image: url('../../assets/icon/seach-hover1.png');
    background-size: cover;
  }
  .seach:hover{
    background-image: url('../../assets/icon/seach.png');
  }
  .top-right{
  width: 45px;
  height: 45px;
  /* background-color: yellowgreen; */
  border-radius: 50%;
  position: absolute;
  right: 40px;
  top:20px
  }
  .top-right:hover{
  background-color: #aaaaaa5e;
  cursor: pointer;
  }
  .fabu{
  width: 100%;
  height: 100%;
  }
  .list{
    /* width:100%; */
    /* height: 100%; */
    /* display: flex; */
    /* position: absolute; */
    /* padding-top: 30px; */
    /* margin-top: 50px; */
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: auto;
    /* margin: auto; */
    /* padding-right: calc((100% - 700px) / 2); */
    /* background-color: rgba(20, 141, 189, 0.717); */
  }
  .boxsList{
    width: 300px;
    height: 370px;
    /* background-color: yellow; */
    box-shadow: var(--el-box-shadow-light);
    margin-left: 45px;
    margin-top: 30px;
    /* overflow: hidden; */
    cursor: pointer;
    float: left;
    border-radius: 15px;
    /* background-image: url('../../../assets/icon/seach-hover.png'); */
  }
  .boxsList:hover{
    
    box-shadow: 10px 10px 16px rgba(0, 0, 0, 0.295);
  }

  .boxsList.expanded {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    border-radius: 0;
    /* position: absolute; */
    position: fixed;
    z-index: 9999;
    background-color: rgba(43, 43, 43, 0.507);
  }
  .list-main{
    display: flex;
    flex-direction: column;
  }
  .list-url{
    width: 100%;
    height: 300px;
    cursor: pointer;
    border-radius: 14px;
  }
  .list-title{
    max-height: 42px;
    margin-top: 4px;
    padding: 0 9px;
    width: calc(100% - 18px);
    height: auto;display: -webkit-box;
    -webkit-line-clamp: 2; /* 设置显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* background-color: yellowgreen; */
  }
  .list-bottom{
    /* display: flex; */
    padding-left: 9px;
    /* flex-direction: row; */
    width: 100%;
    margin-top: 4px;
    height: auto;
    /* height: 2em; */
    font-size: smaller;
    /* background-color: rgb(27, 101, 165); */
  }
  .list-avatar{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    float: left;
  }
  .list-name{
    /* height: 100%; */
    float: left;
    /* width: 40px; */
    /* background-color: aqua; */
    margin-left: 3px;
  }
  .list-like{
    width: auto;
    height: 20px;
    float: right;
    margin-right: 15px;
    /* display: flex;
    flex-direction: column; */
    /* vertical-align: middle; */
    /* justify-content: flex-end; */
    /* background-color: yellowgreen; */
  }
  .list-xin{
    width: 17px;
    height: 17px;
    float:left;
    cursor: pointer;
  }
  .list-num{
    width: auto;
    height: 20px;
    float: right;
    margin-left: 6px;
    margin-right: 9px;
  }
  .main-view{
    /* position: fixed; */
    /* position: relative; */
    /* position: absolute;
    top: 0;
    left: calc(50% / 2);
    width: 50%;
    height:  calc(100% - 80px);
    background-color: rgba(224, 0, 0, 0.979);
    z-index: 9999;
    margin: 40px auto 40px;
    border-radius: 15px;
    overflow: hidden; */
    /* height: 300px; */
    height:  100%;
    position: absolute;
    border-radius: 15px;
    /* border-radius: 8px; */
    overflow: hidden;
    /* background-color: yellowgreen; */
  }
  /* .no-header-dialog .el-dialog__header{
    display: none;
  } */
  /* .no-header-dialog {
  --el-dialog-padding-primary: -10px;
} */


  .view-left{
    width:55%;
    height:  100%;
    float: left;
    /* border-radius: 15px; */
    background-color: rgb(255, 255, 255);
  }
  .view-right{
    width: 45%;
    height:  100%;
    float: right;
    /* background-color: rgb(168, 14, 14); */
  }
  .right-top{
    width: 100%;
    height: 9.5%;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    /* justify-content: center; */
  }
  .top-avatar{
    position: relative;
    background-color: aliceblue;
    width: 12%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    /* float: left; */
    margin-left: 15px;
  }
  .top-name{
    height: auto;
    width: auto;
    /* float: left; */
    margin-left: 5px;
    /* background-color: aquamarine; */
    /* display: flex; */
    /* align-items: center;
    justify-content: center; */
  }
  .top-attend{
    width: 13%;
    height: 6%;
    /* float: right; */
    position: absolute;
    /* background-color: rgb(255, 47, 10); */
    right: 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: large;
  }
  .right-center{
    width: 100%;
    height: calc(90.5% - 60px);
    background-color: rgba(91, 91, 91, 0.066);
    overflow: auto;

    /* overflow-y: hidden; */
    scrollbar-width: none;
  }
  .center-top{
    width: calc(100% - 20px);
    height: auto;
    /* background-color: yellow; */
    margin-top: 9px;
    margin-bottom: 17px;
    padding: 0 10px;
  }
  .center-botton{
    position: relative;
    margin-bottom: 10px;
    padding:0 5px;
  }
  .comment-header{
    display: flex;
    align-items: center;
  }
  .comment-avatar{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
  }
  .comment-meta{
    flex-grow: 1;
  }
  .comment-name{
    font-size: 16px;
    font-weight: bold;
    /* color: yellowgreen; */
  }
  .comment-time{
    color:#aaa;
  }
  .comment-body{
    margin-left: 60px;
    /* line-height: 1.6; */
  }
  .right-botton{
    width: 190%;
    height: 60px;
    /* background-color: violet; */
    bottom: 0;
    display: flex;
    flex-direction: row;
    /* position: absolute; */
    align-items: center;
    overflow: hidden;
  }
  .botton-input{
    width: 100px;
    height: 45px;
    margin-left: 10px;
    border-radius: 20px;
    padding-left: 10px;
    border: 0;
    box-shadow: 0 0 0 1px rgb(2, 87, 121) inset;
    /* background-color: #ebebeb8e; */
    /* float: left; */
  }
  .botton-input:hover{
    /* width: 50%;
    margin-right: 18px;
    transition: all 0.5s; */
  }
  .botton-input:focus{
    width: 48%;
    margin-right: 18px;
    transition: all 0.5s;
    outline: 0;
    /* box-shadow: 0 0 0 20px rgb(2, 87, 121) inset; */
  }
  .botton-like{
    /* width: 60px; */
    /* height: 50px; */
    /* float: left; */
    /* background-color: yellowgreen; */
    margin-left: 10px;
    display: flex;
    flex-direction: row;
  }
  .botton-like-img{
    height: 20px;
    aspect-ratio: 1 / 1;
  }
  .botton-like-num{
    margin-left: 8px;
  }
  .botton-house{
    width: 60px;
    height: 50px;
    /* float: left; */
    /* background-color: rgb(50, 195, 205); */
  }
  .foot{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    /* background-color: rgb(50, 84, 205); */
  }
  :deep(.btn-prev){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(.number){
    height: 1em;
    /* color: yellowgreen; */
    background-color: #ffffff00;
  }
  :deep(.el-pager li.is-active,.el-pager li:hover){
    color: rgb(10, 27, 11);
  }
  :deep(.btn-next.is-last){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(button:disabled){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(.el-pagination){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(.more.btn-quickprev.el-icon){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(.more.btn-quicknext.el-icon){
    height: 1em;
    background-color: #ffffff00;
  }
</style>